<template>
	<view class="content">
		<view class="seckill-section m-t">
			
			<view class="floor-list" >
				<view class="">
					<view v-for="(item, index) in goodsList" :key="index" class="floor-item1" :data-id="item.packageid" @click="navToDetailPage">
						<view class="floor-item1-1">
							<image :src="item.picture" mode="aspectFill"></image>
						</view>
						<view class="floor-item1-2">
							<view>
								<text class="title clamp">{{item.packagename}}</text>	
								<text class="desc clamp ">{{item.sell_count}}人已购买</text>	
							</view>
							<view class="floor-item-price">
								<text class="price">￥{{item.packageprice}}</text>	
								<text class="m-price">￥{{item.sum_price}}</text>	 
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import mPageView from "@/components/m-page-view/m-page-view.vue";
	import uniCard from "@/components/uni-card/uni-card.vue";
	import learningPackApi from '@/api/learningPack.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	let _this
	export default {
		components: {
			uniLoadMore	
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: []
			};
		},
		
		onLoad(options){
			_this=this
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			this.loadData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				learningPackApi.xxb_list().then(res=>{
					console.log(res)
					_this.goodsList = res.data || []
					// _this.goodsList.forEach((item,index)=>{
					// 	item.packageabstract=item.packageabstract.slice(0,10)+'...'
					// })
				})
				uni.stopPullDownRefresh();
			},
			//筛选点击
			tabClick(index){
				if(this.filterIndex === index && index !== 2){
					return;
				}
				this.filterIndex = index;
				if(index === 2){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//显示分类面板
			toggleCateMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(()=>{
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item){
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//详情
			navToDetailPage(e){
				let {id} = e.currentTarget.dataset
				uni.navigateTo({
					url:`/pages/learningPack/detail?id=${id}`
				})
			},
			stopPrevent(){}
		},
	}
</script>

<style lang="scss">
	 page {
	 	background: #f5f5f5;
	 }
	 
	 .m-t {
	 	margin-top: 0upx;
	 }
	 
	 /* 秒杀专区 */
	 .seckill-section {
	 	padding: 4upx 30upx 24upx;
	 	background: #fff;
	 
	 	.s-header {
	 		display: flex;
	 		align-items: center;
	 		height: 92upx;
	 		line-height: 1;
	 
	 		.s-img {
	 			width: 140upx;
	 			height: 30upx;
	 		}
	 
	 		.tip {
	 			font-size: $font-base;
	 			color: $font-color-light;
	 			margin: 0 20upx 0 0;
	 		}
	 
	 		.more {
	 			font-size: $font-lg;
	 			color: $font-color-light;
	 			flex: 1;
	 			text-align: right;
	 		}
	 
	 		.timer {
	 			display: inline-block;
	 			width: 40upx;
	 			height: 36upx;
	 			text-align: center;
	 			line-height: 36upx;
	 			margin-right: 14upx;
	 			font-size: $font-sm+2upx;
	 			color: #fff;
	 			border-radius: 2px;
	 			background: rgba(0, 0, 0, .8);
	 		}
	 
	 		.icon-you {
	 			font-size: $font-lg;
	 			color: $font-color-light;
	 			flex: 1;
	 			text-align: right;
	 		}
	 	}
	 
	 	.tese {
	 		height: 80upx;
	 		line-height: 40upx;
	 		font-size: 28upx;
	 	}
	 
	 
	 	.floor-list {
	 		white-space: nowrap;
	 	}
	 
	 	.scoll-wrapper {
	 		display: flex;
	 		align-items: flex-start;
	 	}
	 
	 	.floor-item {
	 		width: 150upx;
	 		margin-right: 20upx;
	 		font-size: $font-sm+2upx;
	 		color: $font-color-dark;
	 		line-height: 1.8;
	 
	 		image {
	 			width: 150upx;
	 			height: 150upx;
	 			border-radius: 6upx;
	 		}
	 
	 		.price {
	 			color: $uni-color-primary;
	 		}
	 
	 		.m-price {
	 			font-size: $font-sm+2upx;
	 			text-decoration: line-through;
	 			color: $font-color-light;
	 			margin-left: 8upx;
	 		}
	 	}
	 	.floor-item1 {
	 		display:flex;
	 		padding:30upx 10upx;
	 		
	 		width: 100%;
	 		margin-right: 20upx;
	 		font-size: $font-sm+2upx;
	 		color: $font-color-dark;
	 		line-height: 1.8;
	 		image {
	 			width: 160upx;
	 			height: 160upx;
	 			border-radius: 6upx;
	 		}
	 		.price {
	 			color: $uni-color-primary;
	 		}
	 	
	 		.m-price {
	 			font-size: $font-sm+2upx;
	 			text-decoration: line-through;
	 			color: $font-color-light;
	 			margin-left: 8upx;
	 		}
	 		.floor-item1-1{
	 			
	 			
	 		}
	 		.floor-item1-2{
	 			width: 500upx;
	 			position: relative;
	 			padding:0upx 15upx;
				.title{
					font-size: 16px;
					line-height: 16px;
					padding: 10upx 0px;
				}
	 			.desc{
					font-size: 10px;
					color: #555555;
					padding: 20upx 0px;
				}
	 			.floor-item-price{
	 				position: absolute;
	 				bottom: 0;
	 				width: 100%;
	 				padding:0upx 0upx;
	 				
	 				.m-price{
	 					position: absolute;
	 					right: 0;
	 				}
	 			}
	 			
	 		}
	 	}
	 }

</style>
